
<template>
  <div class="bh-container">
    <a-row justify="space-between" align="center" class="header page_header">
      <a-space wrap>
        <div class="title">配置管理</div>
      </a-space>
    </a-row>
    <a-row align="stretch"  class="bh-h-full page_content" style="padding: 15px">
    <!--字典项-->
      <a-col :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="260px" class="bh-h-full bh-ov-hidden">
        <ConfigTree @node-click="handleSelectDict"></ConfigTree>
      </a-col>
      <!--字典值-->
      <a-col :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="1" class="bh-h-full bh-ov-hidden">
        <BhTable
            row-key="id"
            :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
            :data="dataList as []"
            :columns="columns"
            @refresh="search"
            :loading="loading"
            :pagination="pagination"
        >
          <template #toolbar-left>
            <a-input v-model="queryForm.name" placeholder="搜索名称" allow-clear />
            <a-space >
              <a-button type="primary" @click="search">
                <template #icon>
                  <icon-search />
                </template>
                {{ $t('common.search') }}
              </a-button>
              <a-button @click="reset">
                <template #icon>
                  <icon-refresh />
                </template>
                {{ $t('common.reset') }}
              </a-button>
            </a-space>
          </template>
          <template #toolbar-right>
            <a-button v-permission="['sys:config:data:add']" type="primary" @click="AddRow">
              <template #icon><icon-plus /></template>
              <template #default>  {{ $t('common.create') }}</template>
            </a-button>
          </template>
          <!-- 标签 -->
          <template #type="{ record }">
            <a-tag v-if="record.type === 'input-number'" color="#168cff" size="small">数字</a-tag>
            <a-tag v-if="record.type === 'input'" color="#168cff" size="small">输入框</a-tag>
            <a-tag v-if="record.type === 'textarea'" color="#ffb400" size="small">多行文本</a-tag>
            <a-tag v-if="record.type === 'input-password'" color="#86909c" size="small">密码</a-tag>
            <a-tag v-if="record.type === 'radio-group'" color="#168cff" size="small">单选框</a-tag>
            <a-tag v-if="record.type === 'checkbox-group'" color="#7816ff" size="small">复选框</a-tag>
            <a-tag v-if="record.type === 'select'" color="#ffb400" size="small">下拉框</a-tag>
            <a-tag v-if="record.type === 'date-picker'" color="#ffb400" size="small">日期</a-tag>
            <a-tag v-if="record.type === 'time-picker'" color="#168cff" size="small">时间</a-tag>
            <a-tag v-if="record.type === 'image'" color="#86909c" size="small">单张图片</a-tag>
            <a-tag v-if="record.type === 'images'" color="#86909c" size="small">多张图片</a-tag>
            <a-tag v-if="record.type === 'file'" color="#168cff" size="small">单个文件</a-tag>
            <a-tag v-if="record.type === 'files'" color="#ffb400" size="small">多个文件</a-tag>
            <a-tag v-if="record.type === 'ueditor'" color="#f53f3f" size="small">富文本编辑器</a-tag>
          </template>
          <!-- 状态 -->
          <template #status="{ record }">
            <!-- 有修改权限 -->
            <a-switch
                v-if="hasPermission('sys:config:data:status')"
                v-model="record.status"
                type="round"
                :checked-text="TableSwitchStatusText.checkedText"
                :unchecked-text="TableSwitchStatusText.uncheckedText"
                :checked-value="TableSwitchStatus.ENABLED"
                :unchecked-value="TableSwitchStatus.DISABLED"
                :before-change="(s: number) => UpdateStatusRow(record.id, s)"
            />
            <a-badge
                v-else
                :status="record.status == TableSwitchStatus.ENABLED ? 'processing' : 'danger'"
                :text="record.status == TableSwitchStatus.DISABLED ? '开启' : '关闭'"
            />
          </template>
          <template #handle="{ record }">
            <!-- 修改 -->
            <a-button
                v-permission="['sys:config:data:edit']"
                type="text"
                size="mini"
                @click="UpdateRow(record)"
            >
              修改
            </a-button>
            <!-- 删除 -->
            <a-button
                v-permission="['sys:config:data:delete']"
                type="text"
                size="mini"
                status="danger"
                @click="deleteRow(record)"
            >
              删除
            </a-button>
          </template>
        </BhTable>
      </a-col>
    </a-row>
    <ConfigDataFrom ref="ModalRef" @restart="reset" />
  </div>

</template>
<script setup lang="ts">
import ConfigTree from './components/tree/index.vue'// 根据选中字典查询
import { useTable } from '@/hooks/modules/useTable'
import type { TableInstanceColumns } from '@/components/BhTable'
import {  type QueryRequest, type QueryResponse, getList,deleteRows,updateStatus } from '@/api/system/configData'
import {formatDate, isMobile} from '@/utils'
import ConfigDataFrom from "./components/data/from.vue";
import {TableSwitchStatus, TableSwitchStatusText} from "@/types/const";
import usePermission from '@/hooks/permission';
import {Message} from "@arco-design/web-vue";

const {hasPermission} = usePermission();
const queryForm = reactive<QueryRequest>({
  configId: 0,
  name:'',
  code:'',
})
const {
  tableData: dataList,
  loading,
  pagination,
  search,
  handleDelete,
} = useTable((page) => getList({ ...queryForm, ...page }), { immediate: false })

const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
  },
  { title: '配置项名称', dataIndex: 'title',  minWidth: 100, align: 'center',ellipsis: true, tooltip: true },
  { title: '配置项编码', dataIndex: 'code', minWidth: 100, align: 'center', ellipsis: true, tooltip: true },
  { title: '配置类型', dataIndex: 'type', slotName: 'type',minWidth: 100, align: 'center', ellipsis: true, tooltip: true },
  {title: '排序',dataIndex: 'sort', align: 'center',sortable: {sortDirections: ['ascend', 'descend']}},
  { title: '备注', dataIndex: 'note', minWidth: 130, ellipsis: true, tooltip: true },
  { title: '状态', dataIndex: 'status',slotName: 'status', minWidth: 130, ellipsis: true, tooltip: true },
  { title: '创建时间', dataIndex: 'create_time', ellipsis: true, tooltip: true ,width: 180 },
  { title: '修改时间', dataIndex: 'update_time', width: 180, ellipsis: true, tooltip: true },
  {title: '操作',  dataIndex: 'handle', slotName: 'handle', width: 130,align: 'center', fixed: !isMobile() ? 'right' : undefined },
]
const handleSelectDict = (keys: Array<any>) => {
  queryForm.configId = keys.length === 1 ? keys[0] : undefined
  search()
}

// 重置
const reset = () => {
  queryForm.name = undefined
  queryForm.code = undefined
  search()
}
// 删除
const deleteRow = (record: QueryResponse) => {
  return handleDelete(() => deleteRows(record.id), {
    content: `是否确定删除配置项「${record.title}」？`,
    showModal: true,
  })
}

const ModalRef = ref()
// 新增
const AddRow = () => {
  ModalRef.value?.openAdd(queryForm.configId)
}
// 修改
const UpdateRow = (record: QueryResponse) => {
  ModalRef.value?.openUpdate(record)
}


// 更新状态
const UpdateStatusRow = (id: number, status: number) => {
  return updateStatus({
    id,
    status,
  }).then(() => {
    Message.success('操作成功');
  });
};

</script>

<style scoped lang="less">
:deep(.general-card){
  padding: 0 !important;
}
:deep(.arco-card-body){
  padding: 0 !important;
}
</style>